<template>
  <view class="content">
    <concern-banner ref="concern"></concern-banner>
    <view class="tips-box"> </view>
    <view class="info-box">
      <view class="info-block">
        <view class="tips-content">易朴玄空飞星</view>
        <view class="section info-tips">
          <view>请填写真实信息</view>
        </view>
        <view class="section">
          <view class="section-title">排盘时间：</view>
          <view class="section-content">
            <lunar-picker
              ref="lunarPicker"
              :date.sync="customFormData.date"
            ></lunar-picker>
          </view>
        </view>
        <view class="section">
          <view class="section-title">选择大运：</view>
          <view class="section-content">
            <picker
              @change="bindDayunChange"
              :value="customFormData.dayun"
              :range="dayunList"
            >
              <view class="uni-input">{{ dayunList[customFormData.dayun] }}</view>
            </picker>
          </view>
        </view>
        <view class="section">
          <view class="section-title">选择山向：</view>
          <view class="section-content">
            <picker
              @change="bindShanxiangChange"
              :value="customFormData.shanxiang"
              :range="shanxiangList"
            >
              <view class="uni-input">{{ shanxiangList[customFormData.shanxiang] }}</view>
            </picker>
          </view>
        </view>
        <view class="section">
          <view class="section-title">起盘方式：</view>
          <view class="section-content">
            <uni-data-checkbox
              selectedColor="#000"
              selectedTextColor="#000"
              v-model="customFormData.type"
              :localdata="types"
            />
          </view>
        </view>
        <view class="section">
          <view class="section-title">备注：</view>
          <view class="section-content">
            <input
              v-model="customFormData.remark"
              maxlength="10"
              class="name input_text"
              placeholder="请输入备注(选填)"
            />
          </view>
        </view>
        <view class="btn-box">
          <view @click="bindQueryBazi" class="quiryButton">开始测算</view>
        </view>
      </view>
    </view>
    <activity-box :positionId="1301"></activity-box>
    <yipu-logo></yipu-logo>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      customFormData: {
        remark: "",
        type: 0,
        date: [],
        dayun: 0,
        shanxiang: 0,
      },
      dayunList: ["一运", "二运", "三运", "四运", "五运", "六运", "七运", "八运", "九运"],
      shanxiangList: [
        "子山午向",
        "癸山丁向",
        "丑山未向",
        "艮山坤向",
        "寅山申向",
        "甲山庚向",
        "卯山酉向",
        "乙山辛向",
        "辰山戌向",
        "巽山乾向",
        "巳山亥向",
        "丙山壬向",
        "午山子向",
        "丁山癸向",
        "未山丑向",
        "坤山艮向",
        "申山寅向",
        "庚山甲向",
        "酉山卯向",
        "辛山乙向",
        "戌山辰向",
        "乾山巽向",
        "亥山巳向",
        "壬山丙向",
      ],
      types: [
        {
          text: "下卦",
          value: 0,
        },
        {
          text: "替卦",
          value: 1,
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
      isConcern: "user/isConcern",
    }),
  },
  methods: {
    bindDayunChange(e) {
      this.customFormData.dayun = e.detail.value;
    },
    bindShanxiangChange(e) {
      this.customFormData.shanxiang = e.detail.value;
    },
    // 开始排盘
    bindQueryBazi: function (a) {
      // 判断用户是否登录并且关注,登录且关注后才可以开始排盘
      if (this.isConcern == true) {
        // 规则校验
        let validate = this.validData(this.customFormData);
        if (!validate) return false;
        let { remark, type, dayun, shanxiang } = this.customFormData;
        // 获取日历的阳历时
        let result = this.$refs.lunarPicker.getSolarTime();
        let url =
          "/pages/xuankongfeixing/result/result?" +
          "&remark=" +
          remark +
          "&type=" +
          type +
          "&dayun=" +
          dayun +
          "&shanxiang=" +
          this.shanxiangList[this.customFormData.shanxiang] +
          "&year=" +
          result.cYear +
          "&month=" +
          result.cMonth +
          "&day=" +
          result.cDay +
          "&hour=" +
          result.hour +
          "&minute=" +
          result.minute;
        uni.navigateTo({
          url: url,
        });
      } else {
        this.$refs.concern.concernPopup();
      }
    },
    // 数据验证
    validData(customFormData) {
      // 校验名字
      let { date } = customFormData;
      if (date.length < 5) {
        uni.showToast({
          title: "请选择出生日期",
          icon: "none",
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style>
.content {
  height: 100%;
  width: 100%;
}

.tips-box {
  height: 400rpx;
  background-color: #c6a680;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.tips-content {
  color: #c5a57e;
  height: 65rpx;
  width: 100%;
  margin-top: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
}

.info-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -230rpx;
}

.info-block {
  background-color: #fff;
  width: 640rpx;
  height: fit-content;
  border-radius: 0rpx;
  box-shadow: 0 0 20rpx #666;
  display: flex;
  flex-direction: column;
  padding-bottom: 48rpx;
}

.section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #000;
  margin-bottom: 24rpx;
}

.info-tips {
  margin: 58rpx 0;
}

.section-title {
  width: 160rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 32rpx;
  color: #32312e;
}

.section-content {
  width: 440rpx;
  height: 88rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 30rpx;
  border: 1px solid #dddddd;
}

.plural-section {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  height: 88rpx;
  justify-content: center;
}

.plural-title {
  height: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.btn-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 32rpx 0 48rpx;
}

.quiryButton {
  width: 521rpx;
  height: 78rpx;

  font-size: 32rpx;
  color: #fff;
  background-color: #1e1e1eff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.input_text {
  font-size: 32rpx;
  white-space: nowrap;
}
</style>
